<template>
	<view class="main" style="padding-bottom: 90rpx;">
		<!-- 头像 -->
		<view class="u-flex user-box u-p-l-40 u-p-r-20 u-p-b-10">
			<view class="u-m-r-10">
				<u-avatar :src="userPicSrc" size="120" mode="circle"></u-avatar>
			</view>
			<view class="u-flex-1 u-p-l-30 " style="font-weight: 600;">
				<view class="u-font-18 u-p-b-20">{{form.nickname}}</view>
			</view>
		</view>
		<view class="experience u-p-l-40 u-p-r-40">
			<view class="year">
				<text class="text">*技术经验：</text>
				<u-input v-model="fromData.technology_years" type="text" :border="true"
					style="background-color: #FFFFFF;" placeholder="" />
				<text style="font-size: 30rpx;margin-left: 20rpx;">年</text>
			</view>
			<view style="line-height: 26rpx;color: rgba(153, 153, 153, 1);font-size: 24rpx;"><span
					style="color: red;margin-right: 10rpx;">*</span>技术经验 多少年  请正确填写，如发现不符，系统降会降级。</view>
		</view>
		<view class="expert u-p-l-40 u-p-r-40">
			<text class="text">*擅长领域：</text>
			<view style="margin-top: 32rpx;padding-left: 40rpx;">
				<u-checkbox-group @change="checkboxList" width="50%">
					<u-checkbox v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name"
						label-size="34" size="48">{{item.name}}</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view class="technology u-p-l-40 u-p-r-40">
			<text class="text">*技术优势：</text>
			<view style="margin-top: 30rpx;padding-left: 40rpx;">
				<u-checkbox-group @change="checkboxTechnologyList" width="50%">
					<u-checkbox v-model="item.checked" v-for="(item, index) in technologyList" :key="index"
						:name="item.name" label-size="34" size="48">{{item.name}}</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view class="time u-p-l-40 u-p-r-40">
			<text class="text">*工作时间段：</text>
			<view style="margin-top: 30rpx;padding-left: 40rpx;">
				<u-checkbox-group @change="checkboxTimeList" width="50%">
					<u-checkbox v-model="item.checked" v-for="(item, index) in timeList" :key="index" :name="item.name"
						label-size="34" size="48">{{item.name}}</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view class="time u-p-l-40 u-p-r-40">
			<text class="text">*业务方向：</text>
			<u-input v-model="fromData.business_direction" type="textarea" :border="true" :auto-height="autoHeight"
				placeholder="请输入业务，如电商、游戏后台等" placeholder-style="font-size:30rpx;color:rgba(193, 193, 193, 1);" />
		</view>
		<view class="time u-p-l-40 u-p-r-40">
			<text class="text">*自我介绍：</text>
			<u-input v-model="fromData.self_introduction" type="textarea" :border="true" :auto-height="autoHeight"
				placeholder="请输入简介，如优势等，不超过150个字。" placeholder-style="font-size:30rpx;color:rgba(193, 193, 193, 1);"
				maxlength="150" />
		</view>
		<view class="my u-p-l-40 u-p-r-40">
			<text class="text">*我的称呼：</text>
			<u-input v-model="fromData.name" type="text" :border="true" placeholder="请输入称呼"
				placeholder-style="font-size:30rpx;color:rgba(193, 193, 193, 1);" />
		</view>
		<view class="my u-p-l-40 u-p-r-40">
			<text class="text">*我的电话：</text>
			<u-input v-model="fromData.mobile" type="number" :border="true" placeholder="请输入电话"
				placeholder-style="font-size:30rpx;color:rgba(193, 193, 193, 1);" />
		</view>
		<u-button style="color: #FFF; background-color: #1890ff; width: 90%; margin-top: 40rpx;" @click="submit">保存
		</u-button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userPicSrc: "",
				form: {
					mobile: '',
					nickname: "",
					expert: ''
				},
				autoHeight: false,
				list: [],
				technologyList: [],
				timeList: [],
				rules: {
					nickname: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					// mobile: [{
					// 	required: true,
					// 	message: '请输入手机号',
					// 	// 可以单个或者同时写两个触发验证方式 
					// 	trigger: ['change', 'blur'],
					// }],
					expert: [{
						required: true,
						message: '请输入擅长岗位',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				fromData: {}
			}
		},
		onLoad(options) {
			console.log(options)
			this.form.mobile = options.userMobile
			this.form.nickname = options.userName
			// this.form.expert = options.userExpert
			this.userPicSrc = options.userPicSrc;
			this.init()
		},
		// onReady() {
		// 	this.$refs.uForm.setRules(this.rules)
		// },
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				this.avatar = path;
				// 可以在此上传到服务端
			})
		},
		methods: {
			// 换头像
			editAvatar() {
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			// 选择擅长领域
			checkboxList(e) {
				this.fromData.item_ids = []
				this.list.forEach(item => {
					e.forEach(val => {
						if (item.name === val) {
							this.fromData.item_ids.push(item.id)
						}
					})
				})
			},
			// 选择技术优势
			checkboxTechnologyList(e) {
				this.fromData.projectitem_ids = []
				this.technologyList.forEach(item => {
					e.forEach(val => {
						if (item.name === val) {
							this.fromData.projectitem_ids.push(item.id)
						}
					})
				})
			},
			// 选择工作时段
			checkboxTimeList(e) {
				this.fromData.working_hours = []
				this.timeList.forEach(item => {
					e.forEach(val => {
						if (item.name === val) {
							this.fromData.working_hours.push(item.id)
						}
					})
				})
			},
			// 请求api
			requestApi() {
				this.fromData.item_ids = this.fromData.item_ids.join()
				this.fromData.projectitem_ids = this.fromData.projectitem_ids.join()
				this.fromData.working_hours = this.fromData.working_hours.join()
				this.$u.api.updataUserInfo(this.fromData).then(res => {
					if (res.code == 1) {
						this.$u.toast("保存成功！")
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			init() {
				this.list = [];
				this.technologyList = [];
				this.timeList = [];
				this.$u.api.getTask().then(res => {
					let list = res.data
					list.forEach(item => {
						this.list.push({
							id: item.id,
							name: item.name,
							checked: false,
							disabled: false
						})
					})
					this.getUserInfo()
				})
				this.$u.api.getLanguage().then(res => {
					let list = res.data
					list.forEach(item => {
						this.technologyList.push({
							id: item.id,
							name: item.name,
							checked: false,
							disabled: false
						})
					})
					this.getUserInfo()
				})
				this.$u.api.getHours().then(res => {
					let list = res.data
					list.forEach(item => {
						this.timeList.push({
							id: item.id,
							name: item.name,
							checked: false,
							disabled: false
						})
					})
					this.getUserInfo()
				})
			},
			// 得到个人信息
			getUserInfo() {
				this.$u.api.getUserInfo().then(res => {
					this.fromData.technology_years = res.data.technology_years;
					this.fromData.business_direction = res.data.business_direction;
					this.fromData.self_introduction = res.data.self_introduction;
					this.fromData.name = res.data.name;
					this.fromData.mobile = res.data.mobile;
					this.fromData.item_ids = res.data.item_ids;
					this.fromData.projectitem_ids = res.data.projectitem_ids;
					this.fromData.working_hours = res.data.working_hours;
					this.list.forEach(item => {
						res.data.item_ids.forEach(val => {
							if (item.id == val) {
								item.checked = true;
							}
						})
					})
					this.technologyList.forEach(item => {
						res.data.projectitem_ids.forEach(val => {
							if (item.id == val) {
								item.checked = true;
							}
						})
					})
					this.timeList.forEach(item => {
						res.data.working_hours.forEach(val => {
							if (item.id == val) {
								item.checked = true;
							}
						})
					})
				})
			},
			submit() {
				if (!this.fromData.technology_years) {
					this.$refs.uToast.show({
						title: '请输入技术经验',
						type: 'warning',
					})
					return
				}
				if (!this.fromData.business_direction) {
					this.$refs.uToast.show({
						title: '请输入业务方向',
						type: 'warning',
					})
					return
				}
				if (!this.fromData.self_introduction) {
					this.$refs.uToast.show({
						title: '请输入自我介绍',
						type: 'warning',
					})
					return
				}
				if (!this.fromData.name) {
					this.$refs.uToast.show({
						title: '请输入称呼',
						type: 'warning',
					})
					return
				}
				if (!this.fromData.mobile) {
					this.$refs.uToast.show({
						title: '请输入电话',
						type: 'warning',
					})
					return
				}
				if (this.fromData.item_ids.length == 0) {
					this.$refs.uToast.show({
						title: '请选择擅长领域',
						type: 'warning',
					})
					return
				}
				if (this.fromData.projectitem_ids.length == 0) {
					this.$refs.uToast.show({
						title: '请选择技术优势',
						type: 'warning',
					})
					return
				}
				if (this.fromData.working_hours.length == 0) {
					this.$refs.uToast.show({
						title: '请选择工作时段',
						type: 'warning',
					})
					return
				}
				this.requestApi()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.blank {
		width: 100%;
		height: 12rpx;
		background-color: #f5f5f5;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: white;
		color: black;
	}

	.year {
		width: 500rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.text {
		font-size: 34rpx;
		font-weight: bold;
		color: rgba(24, 144, 255, 1);
	}

	.expert {
		margin-top: 34rpx;
	}

	.technology {
		margin-top: 30rpx;
	}

	.time {
		margin-top: 30rpx;
	}

	.my {
		display: flex;
		margin-top: 30rpx;
		align-items: center;
	}

	/deep/.u-checkbox__label {
		font-weight: bold;
	}

	/deep/.u-checkbox-group {
		width: 100%;
	}

	/deep/.u-input__textarea {
		height: 94rpx;
	}
</style>
